<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" >
      <el-form-item label-width="120px" label="所属项目" prop="appId">
        <el-select v-model="formData.appId" placeholder="请选择所属项目" clearable :style="{width: '100%'}" :disabled="editType==='edit'">
          <el-option v-for="item in formData.applicationList" :key="item.id" :label="item.name"
                     :value="item.id" ></el-option>
        </el-select>
      </el-form-item>

<!--      <el-form-item label-width="120px" label="所属项目" prop="appName" v-if="editType==='edit'">-->
<!--        <el-input v-model="formData.appName" clearable-->
<!--                  :style="{width: '100%'}" disabled></el-input>-->
<!--      </el-form-item>-->


      <el-form-item label-width="120px" label="catalog名称" prop="catalogName">
        <el-input v-model="formData.catalogName" placeholder="请输入catalog名称" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label-width="120px" label="hive配置" prop="hiveConfDir">
        <el-input v-model="formData.hiveConfDir" placeholder="请输入hive配置所在路径" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item size="mini">
        <el-button type="primary" @click="handelTest" :loading="isTest">测试连通性</el-button>
        <el-button type="primary" @click="submitForm" :loading="isSave">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {testCatalog, addCatalog, updateCatalog} from "@/api/resource/catalog";

export default {
  components: {},
  props: {
    formData: {
      type: Object,
      default: null
    },
    editType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isSave: false,
      isTest: false,
      rules: {
        appId: [{
          required: true,
          message: '请选择所属项目',
          trigger: 'change'
        }],
        catalogName: [{
          required: true,
          message: '请输入catalog名称',
          trigger: 'blur'
        }],
        hiveConfDir: [{
          required: true,
          message: '请输入hive配置所在路径',
          trigger: 'blur'
        }],
      }
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    handelTest() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.isTest = true;
        testCatalog(this.formData).then(res => {
          this.isTest = false;
          this.$message.success('catalog可以使用')
        }).catch(err => {
          this.$message.error(err)
          this.isTest = false;
        })
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        if (this.isTest) {
          this.$message.warning('正在测试catalog是否可用')
          return;
        }
        this.isSave = true;
        if (this.editType === 'add') {
          addCatalog(this.formData).then(res => {
            this.isSave = false;
            this.$message.success('保存成功！');
            this.$emit("cancelHandel", 'ok')
          }).catch(err => {
            this.isSave = false;
            this.$message.error(err)
          })
        } else {
          updateCatalog(this.formData).then(res => {
            this.isSave = false;
            this.$message.success('保存成功！');
            this.$emit("cancelHandel", 'ok')
          }).catch(err => {
            this.isSave = false;
            this.$message.error(err)
          })
        }
      })
    },
    resetForm: function () {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
